import React, { useRef, useState } from "react";
import axios from "axios";
import { Link, useNavigate } from "react-router-dom";

import "../../theCSS/anniu.css";
import "./login.css";

import verifyImg from "./img/verify.png";
import wechatImg from "./img/wechat.png";
import qqImg from "./img/qq.png";
import InterIP from '../../IP/IP'
export default function LoginPhone() {
  let IP = InterIP().props.children;
  const phoneRef = useRef();
  const verifyRef = useRef();
  const phoneVerifyRef = useRef();

  const phoneHintRef = useRef();
  const phoneVerifyHintRef = useRef();
  const verifyHintRef = useRef();

  const [phoneHintState, setPhoneHintState] = useState("1234");
  const [phoneVerifyHintState, setPhoneVerifyHintState] = useState("1234");
  const [verifyHintState, setVerifyHintState] = useState("1234");

  const navigate = useNavigate();

  // 获取验证码
  function getVerifyCode() {
    axios
      .post("http://" + IP + ":3000/login/authCode", { id: "1" })
      .then((res) => {
        alert("验证码为" + res.data[0].code);
      });
  }

  // 登录按钮
  function loginByPhone() {
    var user = phoneRef.current.value;
    var phoneVerify = phoneVerifyRef.current.value;
    var verify = verifyRef.current.value;

    var phoneHint = phoneHintRef.current;
    var phoneVerifyHint = phoneVerifyHintRef.current;
    var verifyHint = verifyHintRef.current;

    // 判断用户名是否为空
    if (!user) {
      phoneHint.style.color = "red";
      setPhoneHintState((phoneHintState) => {
        return (phoneHintState = "手机号码输入错误，请重新输入");
      });
      return;
    } else {
      phoneHint.style.color = "transparent";
    }

    // 判断验证码是否正确
    if (verify !== "1234") {
      verifyHint.style.color = "red";
      setVerifyHintState((verifyHintState) => {
        return (verifyHintState = "验证码输入错误，验证码为1234");
      });
      return;
    } else {
      verifyHint.style.color = "transparent";
    }

    // 判断手机验证码是否为空
    if (phoneVerify !== "111111") {
      phoneVerifyHint.style.color = "red";
      setPhoneVerifyHintState((phoneVerifyHintState) => {
        return (phoneVerifyHintState =
          "手机验证码输入错误，请点击“获取验证码”获取手机验证码");
      });
      return;
    } else {
      phoneVerifyHint.style.color = "transparent";
    }

    navigate("/home");
  }

  // 注册按钮
  function registerUser() {
    navigate("/register");
  }

  return (
    <div className="login_main tyc_login_main">
      <h3 className="login_biaoti tyc_title_phone">
        <em>登录</em> <Link to="/loginID">账号密码登录</Link>
      </h3>
      <input
        type="text"
        placeholder="请输入手机号"
        className="login_shuru tyc_login_shuru"
        ref={phoneRef}
      />
      <div className="hint" ref={phoneHintRef}>
        {phoneHintState}
      </div>

      <input
        type="text"
        placeholder="验证码"
        className="login_shuru verify"
        ref={verifyRef}
      />
      <img src={verifyImg} alt="" className="verifyImg" />
      <a href="###" className="changeverifyImg">
        看不清换一张
      </a>
      <div className="hint" ref={verifyHintRef}>
        {verifyHintState}
      </div>

      <div className="phoneverify">
        <input
          type="text"
          placeholder="手机验证码"
          className="login_shuru "
          ref={phoneVerifyRef}
        />
        <button
          className="login_yanzhengma tyc_phone_verify"
          onClick={getVerifyCode}
        >
          获取验证码
        </button>
        <div className="hint" ref={phoneVerifyHintRef}>
          {phoneVerifyHintState}
        </div>
      </div>

      <div className="autoLogin">
        <input type="checkbox" />
        <span>自动登录</span>
        <Link to="/ForgetPass">忘记密码</Link>
      </div>
      <div className="btns">
        <input
          type="button"
          value="登录"
          className="login_lvse"
          onClick={loginByPhone}
        />
        <input
          type="button"
          value="会员注册"
          className="login_chengse"
          onClick={registerUser}
        />
      </div>

      <p>提示：未注册用户将直接注册成为礼拜五用户</p>
      <h4>-------------- 用合作网站登录 --------------</h4>
      <div className="qqwechat">
        <img src={wechatImg} alt="" />
        <img src={qqImg} alt="" />
      </div>
    </div>
  );
}
